<template>
	<div :id="idname" class="lift">
		{{name[0]+name[1]}}<br>{{name[2]+name[3]}}
	</div>
</template>

<script>
	export default {
		name:'lift',
		props:['name','idname','mi'],
		data(){
		  return {
			timer:null
		  }
		},
		components:{},
		mounted(){},
		updated(){},
		methods:{}
	}
</script>

<style>
	@keyframes m1{
		0%{
		  box-shadow: 0 0 8px 8px #10e3d4;
		}
		25% {
		  box-shadow: 0 0 5px 5px #f9f57a;
		}
		50% {
		 box-shadow: 0 0 8px 8px #ff5089;
		}
		75% {
		  box-shadow: 0 0 5px 5px #477ed1;
		}
		100%{
			box-shadow: 0 0 8px 8px #10e3d4;
		}
	}
	@keyframes m2{
		0%{
		  box-shadow: 0 0 8px 8px #f9f57a;
		}
		25% {
		  box-shadow: 0 0 5px 5px #ff5089;
		}
		50% {
		 box-shadow: 0 0 8px 8px #477ed1;
		}
		75% {
		  box-shadow: 0 0 5px 5px #10e3d4;
		}
		100%{
			box-shadow: 0 0 8px 8px #f9f57a;
		}
	}
	@keyframes m3{
		0%{
		  box-shadow: 0 0 8px 8px #ff5089;
		}
		25% {
		  box-shadow: 0 0 5px 5px #477ed1;
		}
		50% {
		 box-shadow: 0 0 8px 8px #10e3d4;
		}
		75% {
		  box-shadow: 0 0 5px 5px #f9f57a;
		}
		100%{
			box-shadow: 0 0 8px 8px #ff5089;
		}
	}
	@keyframes m4{
		0%{
		  box-shadow: 0 0 8px 8px #477ed1;
		}
		25% {
		  box-shadow: 0 0 5px 5px #10e3d4;
		}
		50% {
		 box-shadow: 0 0 8px 8px #f9f57a;
		}
		75% {
		  box-shadow: 0 0 5px 5px #ff5089;
		}
		100%{
			box-shadow: 0 0 8px 8px #477ed1;
		}
	}
	.lift{
		border:1px solid #fff;
		margin:30px 0px;
		padding:10px;
		cursor: pointer;
		border-radius: 50%;
	}
	#lift1{
		animation: m1 5s linear infinite;
	}
	#lift2{
		animation: m2 5s linear infinite;
	}
	#lift3{
		animation: m3 5s linear infinite;
	}
	#lift4{
		animation: m4 5s linear infinite;
	}
	.lift:hover{
		color:pink;
	}
</style>
